<template>
	<view class="user">
		<view class="user-info-box" style="background-image: url(/static/upgrade-top.png);">
			<view class="portrait-box">
				<view class="portrait">
					<img style="height: 100%;width: 100%;object-fit: cover;" :src="userInfo?userInfo.userImage:'/static/missing-face.png'" />
				</view>
				<view class="username">
					<span style="font-size: 40rpx;font-weight:500;">{{ userInfo?userInfo.name:"未命名" }}</span>
					<span style="font-size: 28rpx;">（ {{userInfo!=null?(shenfen?"摄影师":"用户"):'游客'}} ）
					</span>
				</view>
			</view>
		</view>
		<view class="yingxiangli" v-if="shenfen">
			<view class="yingxiangli_header">
				<span>影响力</span>
				<span @click="navTo('/pages/user/mycreation/mycreation')">查看></span>
			</view>
			<view class="yingxiangli_body">
				<view class="yingxiangli_body_son">
					<span>{{ userInfo.data.pieceCount }}</span>
					<span>作品总量</span>
				</view>
				<view>|</view>
				<view class="yingxiangli_body_son">
					<span>{{ userInfo.data.traffic }}</span>
					<span>总浏览量</span>
				</view>
				<view>|</view>
				<view class="yingxiangli_body_son">
					<span>{{ userInfo.data.praiseSum }}</span>
					<span>获赞总数</span>
				</view>
			</view>
		</view>
		<view class="settings">
			<list-cell icon="iconzhanghuffffffpx" iconColor="#3482c0" @eventClick="navTo('/pages/user/userinfo/userinfo')"
				title="个人信息"></list-cell>
			<list-cell  icon="icongerenxinxi" iconColor="#e07472" @eventClick="navTo('/pages/user/reserve/reserve')"
				title="预约记录"></list-cell>
			<list-cell icon="iconxiaoxi6" iconColor="#e07472" @eventClick="navTo('/pages/user/mylive/mylive')"
				title="我的喜欢"></list-cell>
			<list-cell icon="iconbangzhu1" v-if="$store.state.isLogin" iconColor="#e07472" @eventClick="loginOut()"
				title="退出登录"></list-cell>
		</view>
	</view>
</template>
<script>
	/**
	 * @des 个人中心
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 11:41
	 * @copyright 2019
	 */
	import {
		getUserInfo,
	} from '@/api/userInfo';
	import listCell from '@/components/rf-list-cell';
	import {
		mapMutations
	} from 'vuex';
	// import rfBadge from '@/components/rf-badge/rf-badge';

	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
		
		},
		data() {
			return {
				// headImg: this.$mAssetsPath.headImg,
				shenfen:false,
				hasLogin:true,
				userInfo:null
			};
		},
		filters: {
		
		
		},
		computed: {
	
	
		},
		async onShow() {
			// console.log("loadingg");
			// 初始化数据
			if(this.$store.state.isLogin){
				await this.initData();
			}
		 
		},
		onTabItemTap() {
				// 您点击了“导航”页...
				this.$store.state.cultureLimit=false;
			},
		methods: {
			loginOut(){
				localStorage.removeItem('user');
				localStorage.removeItem('token');
				this.shenfen=false;
				this.$store.state.isLogin=false;
				this.userInfo=null;
				this.$store.state.token="";
				this.$store.state.username="";
				let routers=`/`
				uni.navigateTo({
					url:routers
				})
				uni.showToast({
					title:"退出成功",
					icon:"success"
				})
			},
			async initData(){
				const response = await (await getUserInfo(this.$store.state.username)).data;
				if(response.code===0){
					this.shenfen=false;
					this.$store.state.isLogin=false;
					return;
				}else{
					if(response.data.identity==="1"){
						this.shenfen=true;
					}else{
						this.shenfen=false;
					}
					this.$store.state.isLogin=true;
					this.userInfo=response.data;
				}	
			},
			
			// 统一跳转接口,拦截未登录路由
			navTo(route) {
				console.log(route);
				if (!route) return;
				let token =localStorage.getItem('token');
				// const user = JSON.parse(localStorage.getItem('user'));
				let vm = this
				if(!token){
					let routers=`/pages/public/login`
					uni.navigateTo({
						url:routers
					})
				}else{
					uni.navigateTo({
						url:route
					})
				}
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			// 跳转至商品详情
			navToProduct(type, id) {
				let route = `/pages/product/product?id=${id}`;
				switch (type) {
					case 'discount':
						route = `/pages/marketing/discount/product?id=${id}`;
						break;
					case 'bargain':
						route = `/pages/marketing/bargain/product?id=${id}`;
						break;
					case 'group_buy':
						route = `/pages/marketing/group/product?id=${id}`;
						break;
					case 'wholesale':
						route = `/pages/marketing/wholesale/product?id=${id}`;
						break;
				}
				this.$mRouter.push({
					route
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: $page-color-base;
	}

	.user-info-box {
		width: 100%;
		height: 350rpx;
		border-bottom: 1rpx solid #9b9b9b;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 40rpx;

		.vip-card-box {
			width: 145rpx;
			height: 45rpx;
			margin-bottom: 82rpx;
			background-color: #3b3b3b;
			border-radius: 25rpx;
			text-align: center;
			line-height: 45rpx;
			color: white;
		}

		.portrait-box {
			height: 120rpx;
			display: flex;
			align-items: center;
			margin-bottom: 42rpx;

			.portrait {
				width: 120rpx;
				border: 1rpx solid #9b9b9b;
				height: 100%;
				border-radius: 30rpx;

				img {
					// width: 100%;
				}
			}

			.username {
				font-size: 40rpx;
				margin-left: 25rpx;
				// height: 150rpx;
			}
		}


	}

	.yingxiangli {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		background: white;

		.yingxiangli_header {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			margin-top: 20rpx;

		}

		.yingxiangli_header span:first-child {
			font-size: 30rpx;
			font-weight: bold;
		}

		.yingxiangli_header span:nth-child(2) {
			color: #c0c0c0;
		}

		.yingxiangli_body {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;

			.yingxiangli_body_son {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.yingxiangli_body_son span:first-child {
				font-weight: bold;
			}

			.yingxiangli_body_son span:nth-child(2) {
				color: #b8bab7;
			}
		}
	}



	.user {
		.user-section {
			height: 520upx;
			padding: 100upx 30upx 0;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 60vw;
				opacity: 0.84;
			}

			.user-info-box {
				height: 180upx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				justify-content: space-between;

				.portrait-box {
					display: flex;
					align-items: center;

					.portrait {
						width: 130upx;
						height: 130upx;
						border: 5upx solid #fff;
						border-radius: 50%;
					}

					.username {
						font-size: $font-lg + 6upx;
						color: $color-white;
						margin-left: 20upx;
					}

					button {
						background-color: transparent;
						font-size: $font-lg + 6upx;
						color: $font-color-dark;
						border: none;
					}

					button::after {
						border: none;
					}
				}
			}

			.vip-card-box {
				display: flex;
				flex-direction: column;
				color: #f7d680;
				height: 240upx;
				background: url('/static/vip-card.png');
				background-size: 100% 100%;
				border-radius: 16upx 16upx 0 0;
				overflow: hidden;
				position: relative;
				padding: 20upx 24upx;

				.b-btn {
					position: absolute;
					right: 24upx;
					top: 24upx;
					width: 132upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					font-size: 22upx;
					color: #36343c;
					border-radius: 20px;
					background: linear-gradient(to left, #f9e6af, #ffd465);
					z-index: 1;
				}

				.tit {
					font-size: $font-base + 2upx;
					color: #f7d680;
					margin-bottom: 28upx;

					.iconfont {
						color: #f6e5a3;
						display: inline-block;
						margin-right: 16upx;
					}
				}
			}
		}

		.cover-container {
			margin-top: -150upx;
			padding: 0 30upx 20upx;
			position: relative;
			background-color: $page-color-base;

			.arc {
				position: absolute;
				left: 0;
				top: -34upx;
				width: 100%;
				height: 36upx;
			}

			.promotion-center {
				background: #fff;
				margin-bottom: 20upx;

				/*分类列表*/
				.category-list {
					width: 100%;
					padding: 0 0 30upx 0;
					border-bottom: solid 2upx #f6f6f6;
					display: flex;
					flex-wrap: wrap;

					.category {
						width: 33.3%;
						margin-top: 50upx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						.img {
							width: 100%;
							display: flex;
							justify-content: center;

							.iconfont {
								font-size: $font-lg + 24upx;
							}
						}

						.text {
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 24upx;
							color: #3c3c3c;
						}

						.share-btn {
							height: 142upx;
							text-align: left;
							background: none;
							padding: 0;
							margin: 0;
						}

						.share-btn:after {
							border: none;
							border-radius: none;
						}
					}
				}
			}

			.tj-sction {
				@extend %section;
				display: flex;

				.tj-item {
					@extend %flex-center;
					flex: 1;
					flex-direction: column;
					margin: 30upx 0;
					font-size: $font-sm;
					color: #75787d;
					/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
				}

				/*.tj-item:last-child {*/
				/*border-right: none;*/
				/*}*/
				.num {
					font-size: $font-base;
				}

				.red {
					color: $base-color;
				}
			}

			.order-section {
				@extend %section;
				padding: 28upx 0;

				.order-item {
					@extend %flex-center;
					width: 120upx;
					height: 120upx;
					border-radius: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
					position: relative;
				}

				.badge {
					position: absolute;
					top: 0;
					right: 4upx;
				}

				.iconfont {
					font-size: 48upx;
				}

				.icon-shouhoutuikuan {
					font-size: 44upx;
				}
			}

			.history-section {
				background: #fff;
				margin-bottom: $spacing-sm;

				.h-list-history {
					margin: 0;
					border-radius: 10upx;
					white-space: nowrap;
					background-color: $page-color-base;

					.h-item-history {
						background-color: $color-white;
						display: inline-block;
						font-size: $font-sm;
						color: $font-color-base;
						width: 180upx;
						margin: $spacing-sm $spacing-sm 0 0;
						border-radius: 10upx;
						position: relative;
						top: 0;
						overflow: hidden;

						.h-item-img {
							width: 180%;
							height: 200upx;
							border-top-left-radius: 12upx;
							border-top-right-radius: 12upx;
							border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
						}

						.tag {
							position: absolute;
							border-top-left-radius: 12upx;
							left: 0;
							right: 0;
							width: 60upx;
							height: 60upx;
						}

						.h-item-text {
							font-size: $font-sm;
							margin: $spacing-sm 4upx;
						}
					}
				}

				.no-foot-print {
					text-align: center;
					padding: 48upx 0;

					.no-foot-print-icon {
						font-size: $font-lg + 2upx;
						margin-right: 10upx;
					}
				}

				.share-btn {
					height: 102upx;
					text-align: left;
					background: none;
					padding: 0;
					margin: 0;
				}

				.share-btn:after {
					border: none;
					border-radius: none;
				}
			}
		}
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		justify-content: space-around;
		display: flex;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
</style>